<template>
  <div class="interact">
    <div class="tab-nav">
      <ul class="tab-ul">
        <router-link class="nav-item" tag="li" exact to="/interact">热门闪问</router-link>
        <router-link class="nav-item" tag="li" exact to="/interact/asked">专属闪答</router-link>        
      </ul>
    </div>
    <router-view />
    <m-footer />
  </div>
</template>

<script>
import mFooter from "../../components/footer";

export default {
  components: {
    mFooter,
  },
  data() {
    return {
      active: 1
    };
  },
  methods: {
    question() {},
    answer() {}
  }
};
</script>

<style scoped lang="less">
.interact {
  .pb(@fheight);
  .tab-nav {
    .pt(14);
    .pb(14);
    display: flex;
    justify-content: center;
    border-bottom: 1px solid @bdColor;
    .tab-ul{
      display: flex;
      border: 2px solid @primary;
      border-radius: 0.133333rem;
      overflow: hidden;
    }
    .nav-item {
      height: .8rem;
      line-height: .8rem;
      text-align: center;
      color: @primary;
      background: #fff;
      font-size: 0.346667rem;
      padding-left: 1em;
      padding-right: 1em;
      &.router-link-exact-active {
        color: #fff;
        background: @primary;
      }
    }
  }
}
</style>
